<template>
    <div>
		<div id="slider" class="mui-slider">
    		<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-content">
        		<div class="mui-scroll">
						<a :class="['mui-control-item',item.id == 0 ? 'mui-active' :'' ]" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">
							{{item.title}}
						</a>
				
						
				</div>
			</div>

		</div>
		<ul class="photo-list">
		
  			<router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/'+item.id" tag="li">
    			 <img v-lazy="item.ima_url">
			<div class="info">
				 <h1 class="info-title">{{item.title}}</h1>
				 <div class="info-body">{{item.abstruct}}</div>
			</div>
				
  			</router-link>
		</ul>



	</div>
 
        
  
</template>

<script> 
//导入mui的mui.js 文件
import mui from '../../lib/mui/js/mui.js'

export default {
    data(){
        return{
			list:[],
				list1:[
				{
					id:1,
					title:"这是大美女章若楠",
					ima_url:require("../../images/photolist1-1.jpg"),
					abstruct:"有气质而且可爱的大美女！"
				},
					{
					id:2,
					title:"这是大美女章若楠",
					ima_url:require("../../images/photolist1-2.jpg"),
					abstruct:"有气质而且可爱的大美女！"
				},
					{
					id:3,
					title:"这是大美女章若楠",
					ima_url:require("../../images/photolist1-3.jpg"),
					abstruct:"有气质而且可爱的大美女！"
				},
					{
					id:4,
					title:"这是大美女章若楠",
					ima_url:require("../../images/photolist1-4.jpg"),
					abstruct:"有气质而且可爱的大美女！"
				},		{
					id:5,
					title:"这是大美女章若楠",
					ima_url:require("../../images/photolist1-5.jpg"),
					abstruct:"有气质而且可爱的大美女！"
				}
				],


				list2:[
			
					{
					id:6,
					title:"活泼可爱的叮叮",
					ima_url:require("../../images/photolist2-1.jpg"),
					abstruct:"很喜欢的微博达人，他和张张的爱情很甜！"
				},
						{
					id:7,
					title:"活泼可爱的叮叮",
					ima_url:require("../../images/photolist2-2.jpg"),
					abstruct:"很喜欢的微博达人，他和张张的爱情很甜！"
				},
						{
					id:8,
					title:"活泼可爱的叮叮",
					ima_url:require("../../images/photolist2-3.jpg"),
					abstruct:"很喜欢的微博达人，他和张张的爱情很甜！"
				},
						{
					id:9,
					title:"活泼可爱的叮叮",
					ima_url:require("../../images/photolist2-4.jpg"),
					abstruct:"很喜欢的微博达人，他和张张的爱情很甜！"
				},
						{
					id:10,
					title:"活泼可爱的叮叮",
					ima_url:require("../../images/photolist2-5.jpg"),
					abstruct:"很喜欢的微博达人，他和张张的爱情很甜！"
				}
				],
				list3:[
					{
					id:11,
					title:"超级火爆的网红妹纸！",
					ima_url:require("../../images/photolist3-1.jpg"),
					abstruct:"她们就是性感女郎，卖肉卖萌卖弄风骚！"
				},
					{
					id:12,
					title:"超级火爆的网红妹纸！",
					ima_url:require("../../images/photolist3-2.jpg"),
					abstruct:"她们就是性感女郎，卖肉卖萌卖弄风骚！"
				},
						{
					id:13,
					title:"超级火爆的网红妹纸！",
					ima_url:require("../../images/photolist3-3.jpg"),
					abstruct:"她们就是性感女郎，卖肉卖萌卖弄风骚！"
				},
						{
					id:14,
					title:"超级火爆的网红妹纸！",
					ima_url:require("../../images/photolist3-4.jpg"),
					abstruct:"她们就是性感女郎，卖肉卖萌卖弄风骚！"
				},
						{
					id:15,
					title:"超级火爆的网红妹纸！",
					ima_url:require("../../images/photolist3-5.jpg"),
					abstruct:"她们就是性感女郎，卖肉卖萌卖弄风骚！"
				}
			
				],	
		
            cates:[
				{
					id:1,
					title:"章若楠"
				},
				{
					id:2,
					title:"叮叮叮"
				},	
				{
					id:3,
					title:"网红美女"
				},
				{
					id:4,
					title:"美女4"
				},
				{
					id:5,
					title:"最后一个"
				},
			]
			
        };
	},
	created(){
		this.getAllCategory();
		this.getPhotoListByCateId(0)
	},
  mounted() {
    // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
    // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
	// 2. 初始化滑动控件
	
    mui(".mui-scroll-wrapper").scroll({
		 
	  	deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	  
	});
	

  },

 methods:{
	 //模拟数据加载
getAllCategory(){
	this.cates.unshift({
		id:0,
		title:"全部"
	})
},
getPhotoListByCateId(cateId){
	if(cateId == 0){
	for (var i in this.list2){
		this.list1.push(this.list2[i])
	}
	for (var i in this.list3){
		this.list1.push(this.list3[i])
	}
	this.list = this.list1
		// this.list = this.list1.concat(this.list2).concat(this.list3)
		// console.log(this.list)
	}else if(cateId == 1){
		this.list = this.list1
	}else if(cateId == 2){
		this.list = this.list2
	}else if (cateId == 3){
		this.list = this.list3
	}
}
//向接口请求数据
// getAllCategory(){
// 	this.$http.get("api/getimgcategory").then(result =>{
// 		if (result.body.status === 0){
// 			result.body.message.unshift({
// 				title:"全部",
// 				id:0
// 			});
// 			this.cates = result.body.message;
// 		}
// 	});
// }
// getPhotoListByCateId(cateId){
// 	this.$http.get("api/getimages/"+cateId).then(result =>{
// 		if(result.body.status === 0){
// 			this.list = result.body.message;
// 		}
// 	})
// }


 }
};
</script>


<style lang="scss" scoped>
    * {
  touch-action: pan-y;
}

.photo-list{
	list-style:none; 
	margin: 0px;
	padding: 10px;
	padding-bottom: 0px;
 li {
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
		box-shadow: 0 0 9px #999;
		position: relative;

    .info{
		color:white;
		text-align: left;
		position:absolute;
		bottom:0px;
		background-color: rgba(0,0,0,0.4);
		max-height: 84px;	
		.info-title{
			font-size: 14px;
		}
		.info-body{
			font-size: 13px;
		}
	}
    img {
      width: 100%;
      vertical-align: middle;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
}

</style>